<template>
  <ElDialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1200px"
    :close-on-click-modal="false"
    destroy-on-close
  >
    <div>出库单弹窗功能开发中...</div>

    <template #footer>
      <ElSpace>
        <ElButton @click="handleCancel">取消</ElButton>
        <ElButton type="primary" @click="handleSubmit" v-if="type !== 'view'"
          >确定</ElButton
        >
      </ElSpace>
    </template>
  </ElDialog>
</template>

<script setup lang="ts">
import { computed } from "vue";

defineOptions({ name: "WmsShipmentOrderDialog" });

// Props
interface Props {
  visible: boolean;
  type: "add" | "edit" | "view";
  mode: "popup" | "page";
  orderData?: WMS.Order.ShipmentOrderInfo | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  type: "add",
  mode: "popup",
  orderData: null,
});

// Emits
interface Emits {
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}

const emit = defineEmits<Emits>();

// 弹窗状态
const dialogVisible = computed({
  get: () => props.visible,
  set: (value) => emit("update:visible", value),
});

const dialogTitle = computed(() => {
  const titleMap = {
    add: "新增出库单",
    edit: "编辑出库单",
    view: "查看出库单",
  };
  return titleMap[props.type];
});

// 取消
const handleCancel = () => {
  dialogVisible.value = false;
};

// 提交
const handleSubmit = () => {
  dialogVisible.value = false;
  emit("submit");
};
</script>
